<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>属性和类名绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <style>
        .color-red {
            color: red;
        }

        .color-orange {
            color: orange;
        }

        .color-yellow {
            color: yellow;
        }

        .color-green {
            color: lawngreen;
        }

        .color-aqua {
            color: aqua;
        }

        .color-blue {
            color: blue;
        }

        .color-purple {
            color: purple;
        }

        h1 {
            width: 120px;
            border: 3px dotted;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <p>属性绑定：</p>
    <a href="https://xueyuanjun.com" :title="title">学院君网站</a>
    <hr>
    <p>类名绑定：</p>
    <h1 v-bind:class="curClass">学院君</h1>
    <button v-on:click="toggleClass">换个颜色</button>
</div>
<script>
    // 扩展数组方法支持随机获取元素
    Array.prototype.getRandomElement = function () {
        return this[Math.floor(Math.random() * this.length)]
    };
    var app = new Vue({
        el: '#app',
        data: {
            title: "致力于提供优质中文编程技术学习资源",
            classes: [
                'color-red',
                'color-orange',
                'color-yellow',
                'color-green',
                'color-blue',
                'color-aqua',
                'color-purple'
            ],
            curClass: 'color-red'
        },
        methods: {
            toggleClass() {
                this.curClass = this.classes.getRandomElement();
            }
        }
    });
</script>
</body>
</html>